<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2-饼图-官方示例</title>
		<!-- 导入echart插件 -->
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<style type="text/css">
			.box{
				width:600px;
				height:500px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script type="text/javascript">
		  //基于准备好的dom，初始化echarts实例
		  var myChart = echarts.init(document.querySelector('.box'));
		  //指定图表的配置项和数据
		  var option = {
		    title: {
		      text: '仿百度网站访问数据',
		      subtext: '模拟数据',
		      left: 'center'
		    },
		    tooltip: {
		      trigger: 'item'
		    },
		    legend: {
		      orient: 'vertical',
		      left: 'left'
		    },
		    series: [
		      {
		        name: '数据统计',
		        type: 'pie',
		        radius: '50%',
		        data: [
		          { value: 1048, name: '移动访问' },
		          { value: 735, name: 'PC端访问' },
		          { value: 580, name: '微信访问' },
		          { value: 484, name: 'APP访问' },
		          { value: 300, name: '小程序访问' }
		        ],
		        emphasis: {
		          itemStyle: {
		            shadowBlur: 10,
		            shadowOffsetX: 0,
		            shadowColor: 'rgba(0, 0, 0, 0.5)'
		          }
		        }
		      }
		    ]
		  };
		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
		</script>
	</body>
</html>
